<template>
  <view class="page_box">
    <u-modal
      v-model="showinfo"
      @confirm="confirm"
      mask-close-able
      confirm-text="添加"
    >
      <view class="slot-content">
        <view class="info4">
          <text>收货人</text>

          <input
            type="text"
            value=""
            v-model="rcvr"
            placeholder="请填写收货人"
          />
        </view>
        <view class="info4">
          <text>联系电话</text>

          <input
            type="number"
            value=""
            v-model="detailedCall"
            placeholder="请填写收货人联系电话"
          />
        </view>
        <view class="info4">
          <text>详细地址</text>

          <input
            type="text"
            value=""
            v-model="addr"
            placeholder="请填写收货人详细地址"
          />
        </view>
        <view class="info4">
          <text>所在小区</text>

          <input
            type="text"
            value=""
            v-model="residentialArea"
            placeholder="请选择收货人所在小区"
            @click="getMap"
          />
        </view>
      </view>
    </u-modal>
    <view class="content">
      <view class="tianjia" @click="showinfo = true" v-if="xianshi">
        <text>地址添加</text>
      </view>
      <view class="tianjia1" v-else>
        <view class="name1">
          <text class="text">{{ data6.community }}</text>
          <text class="text1">{{ data6.consignee }} {{ data6.phone }}</text>
        </view>
        <view class="xiugai1" @click="showinfo = true">
          <text>修改></text>
        </view>
      </view>
      <view class="list" v-if="data2">
        <view v-for="(item, index) in data2" :key="index">
          <view class="info">
            <view class="left">
              <image
                :src="'https://whb.qianjitianxia.com' + item.figure"
                mode="heightFix"
              ></image>
            </view>
            <view class="right">
              <text class="r1">{{ item.name }}</text>
              <view class="add">
                <text class="moeny">￥{{ item.price }}</text>

                <view class="add1">数量 : {{ item.num }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="beizhu">
        <view class="shuru">
          <input
            type="text"
            value=""
            placeholder="特殊需求请再次备注"
            v-model="note"
          />
        </view>
      </view>
      <view class="submit" @click="plceAnOrdr">
        <text v-if="cart">总金额: ¥ {{ cart }}元</text>
        <text v-else>总金额: ¥ 0 元</text>
        <view class="left">提交</view>
      </view>
    </view>
    <!-- 自定义底部导航 -->
    <shopro-tabbar></shopro-tabbar>
    <!-- 关注弹窗 -->
    <shopro-float-btn></shopro-float-btn>
    <!-- 连续弹窗提醒 -->
    <shopro-notice-modal></shopro-notice-modal>
    <!-- 登录提示 -->
    <shopro-login-modal></shopro-login-modal>
  </view>
</template>

<script>
import shoprpCoupon from "@/components/shopro-coupon/shopro-coupon.vue";
export default {
  components: {
    shoprpCoupon,
  },
  data() {
    return {
      dizhi: "",
      uid: "",
      name: "",
      data: [],
      showinfo: false, // 地址显示
      cart: "",
      data2: [],
      rcvr: "", //收货人
      detailedCall: "", //联系电话
      addr: "", //详细地址
      residentialArea: "", //所在小区
      note: "", // 备注
      site: "",
      xianshi: false,
      data6: {},
    };
  },
  onShow() {
    this.residentialArea = uni.getStorageSync("dizhi1").name1;
    this.site = uni.getStorageSync("dizhi1").name2;
    //uni.removeStorageSync('dizhi1');
    console.log("this.dizhi :>> ", this.dizhi);
    //this.gethm()
    //this.shoppingCartlist()
  },
  onLoad() {
    this.sid = uni.getStorageSync("sid").sid;
    this.getUsers();
  },
  methods: {
    // 获取地址
    async getAddr() {
      console.log("获取地址.uid :>> ", this.uid);
      const res = await this.$api("getAddr", {
        uid: this.uid,
      });
      if (!res.code) {
        this.xianshi = true;
      }
      this.data6 = res.data;
      console.log("获取地址1111 :>> ", res);
    },
    // 添加地址
    async confirm() {
      console.log("this.rcvr :>> ", this.rcvr);
      console.log("this.detailedCall :>> ", this.detailedCall);
      console.log("this.add :>> ", this.addr);
      console.log("this.residentialArea :>> ", this.residentialArea);
      console.log("this.site :>> ", this.site);
      const res = await this.$api("addAddr", {
        uid: this.uid, // uid
        consignee: this.rcvr, // 收货人
        phone: this.detailedCall, // 手机号码
        address: this.addr, // 详细地址
        community: this.residentialArea, //所在小区
        site: this.site, //地址
      });
      console.log("添加地址 :>> ", res);

      //uni.$showMsg(res.msg);
      if (res) {
        this.getAddr();
        this.xianshi = false;
      }
    },
    //  下单
    async plceAnOrdr() {
      console.log("this.sid :>> ", this.sid);
      console.log("this.uid :>> ", this.uid);
      console.log("this.rcvr :>> ", this.rcvr);
      console.log("this.detailedCall :>> ", this.detailedCall);
      console.log("this.addr :>> ", this.addr);
      console.log("this.residentialArea :>> ", this.residentialArea);
      console.log("this.site :>> ", this.site);
      const data = await this.$api("plceAnOrdr", {
        sid: this.sid,
        uid: this.uid,
        note: this.note,
      });
      if (data == "订单成功") {
        this.jump("/pages/user/ordrManagement");
        this.gethm();
        this.shoppingCartlist();
      }

      (this.rcvr = ""),
        (this.detailedCall = ""),
        (this.addr = ""),
        (this.residentialArea = ""),
        console.log("下单 :>> ", data);
    },
    //  购物车列表
    async shoppingCartlist(uid) {
      const data = await this.$api("shoppingCartlist", {
        sid: uni.getStorageSync("sid").sid,
        uid: uid,
      });
      this.data2 = data.list;
      console.log("购物车列表 :>> ", data);
    },
    // 小卖部首页
    async gethm(uid) {
      const data = await this.$api("gethm", {
        uid: uid,
        sid: uni.getStorageSync("sid").sid,
      });
      this.cart = data.cart;
      console.log("小卖部首页 :>> ", data);
    },
    // 获取用户的id
    async getUsers() {
      const res = await this.$api("user.info");
      this.uid = res.data.id;
      this.gethm(res.data.id);
      this.shoppingCartlist(res.data.id);
      this.getAddr();
      console.log("ziji :>> ", res);
    },
    dianji(sid) {
      if (sid) {
        var sid = {
          sid: sid,
          zhuantai: 2,
        };
        uni.setStorageSync("sid", sid);
        this.jump("/pages/index/weihuobang");
      }
    },
    jump(path, query) {
      this.$Router.push({
        path: path,
        query: query,
      });
    },
    getMap() {
      uni.chooseLocation({
        success: function (res) {
          console.log("位置名称：" + res.name);
          console.log("详细地址：" + res.address);
          console.log("纬度：" + res.latitude);
          console.log("经度：" + res.longitude);
          var dizhi1 = {
            name1: res.name,
            name2: res.address + res.name,
          };

          uni.setStorageSync("dizhi1", dizhi1);
        },
      });
    },
  },
};
</script>

<style lang="scss">
.page_box {
  .info4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 131rpx;
    margin-left: 29rpx;
    border-bottom: 2rpx solid #f1eded;

    text {
      font-size: 36rpx;
      font-family: "Microsoft YaHei", PingFang SC;
      font-weight: 400;
      color: #333333;
    }

    text:before {
      content: "*";
      color: #ff0000;
    }

    .inputStyle {
      font-size: 30rpx;
      font-family: "Microsoft YaHei", PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
  .content {
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    background-color: #ffffff;
    .tianjia,
    .tianjia1 {
      width: 100%;
      padding: 30rpx 30rpx 0 30rpx;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
    }
    .tianjia1 {
      .name1 {
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        .text {
          display: inline-block;
          margin-bottom: 10rpx;
          height: 32rpx;
          line-height: 32rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .text1 {
          height: 32rpx;
          line-height: 32rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
      .xiugai1 {
        color: #999999;
        font-size: 30rpx;
      }
    }
    .list {
      //margin-top: 50rpx;
      padding: 50rpx 30rpx;
      padding-bottom: 150rpx;
      .info {
        height: 150rpx;
        display: flex;
        align-items: center;
        //border: 1rpx solid #ECC177;
        margin: 20rpx 0 0 0;
        .left {
          width: 150rpx;
          height: 150rpx;
          image {
            width: 150rpx;
            height: 150rpx;
          }
        }
        .right {
          margin-left: 18rpx;
          flex: 1;
          height: 150rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .r1 {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
          .add {
            display: flex;
            justify-content: space-between;
            .moeny {
              width: 200rpx;
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ff0000;
            }
            .add1 {
              display: flex;
              align-items: center;
              justify-content: center;

              .textt {
                display: inline-block;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30rpx;
                height: 30rpx;
                border-radius: 50%;
                background-color: #ebbc6f;
                color: #ffffff;
              }
              .num {
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                margin: 0 10rpx;
              }
            }
          }
        }
      }
    }
    .beizhu {
      width: 100vw;
      height: 80rpx;
      position: fixed;
      bottom: 110rpx;
      left: 0;

      display: flex;
      font-size: 37rpx;
      align-items: center;
      justify-content: space-between;
      color: #ffffff;
      font-weight: 500;
      padding: 0 20rpx;
      .shuru {
        width: 100%;
        height: 100%;
        border: 1rpx solid #e9b562;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        input {
          width: 100%;
          margin-left: 10rpx;
          color: #000000;
          font-size: 23rpx;
        }
      }
    }
    .submit {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #595959;
      display: flex;
      font-size: 37rpx;
      align-items: center;
      justify-content: space-between;
      color: #ffffff;
      font-weight: 500;
      padding: 0 20rpx;
      .left {
        width: 150rpx;
        height: 80rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e9b562;
      }
    }
  }
}
</style>
